<!--相关方培训 contractorTraining-->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row class="query-form" >
                <Col span="8">
                    <FormItem label="二级集团：">
                        <two-level-org org-code class="query-form-el" v-model="dataToQuery.twoLevelOrgCode" />
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属单位：">
                        <company-select v-model="dataToQuery.companyName" style="width:100%" />
                        <!-- <cascaderDom ref="childOrg" @setOrgInfo="setOrgId" @setOrgname="setOrgName"
                                     :rootOrgId="currentUser.companyId"
                                     :orgTree="true"></cascaderDom> -->
                    </FormItem>
                </Col>
               <Col span="8" v-if="!switchFlag" >
                   <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reseter" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label='相关方名称：'>
                        <Input class='' type='text' v-model='dataToQuery.contractorName' ></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">

                <Col span="8" offset="16">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                    <download-button :api="exportUrl" :queryForm='dataToQuery' />
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading ||  pageStatus.baseLoading'
        @on-sort-change="sortChange" show-summary :summary-method="(data) => this.gAmountTo(data,['trainingNum'])"  
        border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange1" @on-page-size-change="pageSizeChange1" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal  :title="mode == 'view' ?'相关方培训及告知详情':'相关方培训及告知'" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=800 :styles="{height:'559px'}"  class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dataToView" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span='11'>
                                <FormItem label='相关方作业事项：' prop="workingMatters">
                                    <div v-if="mode === 'view'">{{ dataToView.workingMatters }}</div>
                                    <Input v-else class=''placeholder="请填写相关方名称" type='text' v-model='dataToView.workingMatters'
                                           readonly @on-focus="modelSearch=true" suffix="ios-search"></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='相关方名称：' prop='contractorName'>
                                    <div v-if="mode === 'view'">{{ dataToView.contractorName }}</div>
                                    <Input v-else class='' readonly type='text' v-model='dataToView.contractorName'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                           <!-- <Col span="11">
                                <FormItem label='施工项目名称：' prop='projectName'>
                                    <div v-if="mode === 'view'">{{ dataToView.projectName }}</div>
                                    <Input v-else class=''placeholder="请填写施工项目名称" type='text' v-model='dataToView.projectName'></Input>
                                </FormItem>
                            </Col> -->
                            <Col span="11">
                                <FormItem label='培训时间：' prop='trainingDate'>
                                    <div v-if="mode === 'view'">{{ renderViewDate(dataToView.trainingDate) }}</div>
                                    <DatePicker v-else class="w" placeholder="请选择培训时间" v-model='dataToView.trainingDate' ></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='培训人数：' prop='trainingNum'>
                                    <div v-if="mode === 'view'">{{ dataToView.trainingNum }}</div>
                                    <InputNumber v-else class='w'placeholder="请填写培训人数" min="0" type='text' v-model='dataToView.trainingNum'></InputNumber>
                                </FormItem>
                            </Col>
													</Row>
													<Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='培训部门：' prop='trainingSpeaker'>
                                    <div v-if="mode === 'view'">{{ dataToView.trainingSpeaker }}</div>
                                    <Input v-else class=''placeholder="请填写培训部门" type='text' v-model='dataToView.trainingSpeaker'></Input>
                                </FormItem>
                            </Col>
														<Col span="11">
														</Col>
                        </Row>
                        <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='特种作业证件人数：' prop='certificatesNum'>
                                    <div v-if="mode === 'view'">{{ dataToView.certificatesNum }}</div>
                                    <InputNumber v-else class='w'placeholder="请填写培训人数" min="0" type='text' v-model='dataToView.certificatesNum'></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="11">
                            </Col>
                        </Row> -->
                        <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='培训地点：' >
                                    <div v-if="mode === 'view'">{{ dataToView.address }}</div>
                                    <Input v-else class=''placeholder="请填写培训地点" type='textarea' v-model='dataToView.address' :rows="4"></Input>
                                </FormItem>
                            </Col>
                        </Row>
 -->
                        <Row type="flex" justify="space-around" class="code-row-bg" v-if="mode === 'view'">
                            <Col span="11"  >
                                <FormItem label='创建人：' prop='userName'>
                                    <div>{{ dataToView.userName }}</div>
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label='创建时间：' prop='createDate'>
                                    <div >{{ renderViewDate(dataToView.createDate) }}</div>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem v-if="mode === 'view'" label="培训照片、签到表：">
                                    <div v-show="dataToView.idFiles.length>0" v-for="item in dataToView.idFiles">
                                        <a @click="downloadFile(item)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                    </div>
                                </FormItem>
                                <FormItem v-else label="培训照片、签到表：" prop='idFiles'>
                                    <div >
                                        <Upload ref="upload"
                                                :before-upload="(file) => { beforeUpload(file, 'id') }"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 20px">
                                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="dataToView.idFiles.length>0" v-for="item in dataToView.idFiles">
                                        <a @click.prevent="downloadFile(item)">{{item.fileName}}</a>
                                        <Button type="text" icon="md-trash" @click="removeFile(item.id, 'id')"
                                                style="margin-left: 20px;margin-bottom: 3px"/>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <Modal title="相关方作业信息" :transfer=false footer-hide v-model="modelSearch" :width=900>
                        <working-related-parties v-if="modelSearch" v-show="modelSearch" :modelSearch="modelSearch"
                                                 @getSelectModelData='danxuan' :companyId="currentUser.companyId"></working-related-parties>
                        <div slot="footer">
                            <Button class='ivu-btn-save' @click="onCancel">关闭</Button>
                        </div>
                    </Modal>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dataToView')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>

    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {sessionStorage} from '@/common/cacheUtils.js';
    import {formatDate} from '@/tools/index'
    import _deepclone from 'lodash/cloneDeep'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import workingRelatedParties from '../../interestedPartiesManager/workingRelatedParties.vue'

    export default {
        components:{cascaderDom, workingRelatedParties},
        data(){
            return {
                ...this.createCommonDataField(),
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', minWidth:150,render: this.indexColumnsRenderSum},
                    {minWidth: 150, title: '作业事项', align: 'center', key: 'workingMatters',tooltip:true},
                    { key:'contractorName',title: '相关方名称',   minWidth:150,align: 'center' },
                    {minWidth: 150, title: '所属单位',align: 'center',key: 'companyName' },
                    // { key:'projectName',title: '施工项目名称',   minWidth:150,align: 'center' },
                    { key:'trainingDate',title: '培训时间', sortable: "custom",  minWidth:150,align: 'center',render: this.renderCellDate },
                    { key:'trainingNum',title: '培训人数',   minWidth:150,align: 'center' },
                    // { key:'certificatesNum',title: '特种作业证件人数',   minWidth:150,align: 'center' },
                    { key:'trainingSpeaker',title: '培训部门',  minWidth:150, align: 'center' },
                    // { key:'address',title: '培训地点',   minWidth:300,align: 'center', ellipsis: true},
                    this.getActionColumns((params) => {return params.row.id === '-1';})
                ],
                ruleCustom : {
                    contractorName: [ { required: true, message: '请填写相关方名称', trigger: 'change',}],
                    // projectName: [ { required: true, message: '请填写施工项目名称', trigger: 'change',}],
                    trainingDate: [ { required: true, message: '请填写培训时间', trigger: 'change',type:'date'}],
                    trainingNum: [ { required: true, message: '请填写培训人数', trigger: 'change',type:'number'}],
                    // certificatesNum: [ { required: true, message: '特种作业证件人数', trigger: 'change',type:'number'}],
                    trainingSpeaker: [ { required: true, message: '请填写培训部门', trigger: 'change',}],
                    // address: [ { required: true, message: '请填写培训地点', trigger: 'change',}],
										idFiles: [{
										    validator: (rule, value, callback) => {
										        if (this.dataToView.idFiles.length < 1) {
										            callback('附件必须上传')
										        } else {
										            callback()
										        }
										    },
										    required: true,
										    trigger: 'change'
										}]

                },
                tableHeight:10,
                // api
                standardSelectModal:false,
                queryUrl:Api.queryContractorTraining,
                exportUrl: Api.queryContractorTraining + '/export',
                deleteUrl:Api.deleteContractorTraining,
                updateUrl:Api.updateContractorTraining,
                saveUrl:Api.saveContractorTraining,
                loading:false,
                modelSearch:false
            }
        },
        mounted() {
            this.dataToQuery ={};
            this.setTableHeight(193);
            this.query();
        },
        methods:{

            ...pageCommonFunction,
            danxuan(row) {
                this.modelSearch = false;
                // this.InputData.contractorId = row.contractorId
                this.dataToView.contractorName = row.relatedPartiesName//相关方名称
                this.dataToView.workingMatters = row.workingMatters//作业事项
                this.dataToView.workingRelatedId = row.id//相关方作业id
            },
            query() {
                this.pagedata.currentPage = 1;
                this.pagedata.pageSize = 10;
                this.query1()
            },

            submitBase(name,dateToSubmit) {
                if (this.pageStatus.sending) return
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Modal.confirm({
                            title: '提示',
                            content: '<p>是否要提交？</p>',
                            onOk: () => {
                                if (dateToSubmit === undefined) {
                                    dateToSubmit = _deepclone(this.dataToView)
                                }
                                let url = this.mode === 'add' ? this.saveUrl : this.updateUrl;
                                // 月份转为日期
                                if(dateToSubmit.trainingDate) {
                                    dateToSubmit.trainingDate = formatDate(dateToSubmit.trainingDate,'yyyy-MM-dd')
                                }
                                this.pageStatus.sending = true

                                let successHandle = (res) => {
                                    if (res.data.status === 200) {
                                        this.$Message.success(this.mode === 'add' ? '添加成功' : '修改成功');
                                        this.dialogShow = false;
                                        this.query1()
                                    } else if (res.data.status === 201) {
                                        this.$Message.error(res.data.msg);
                                    }
                                    this.pageStatus.sending = false
                                }
                                let failedHandle = e => {
                                    this.$Message.error(this.mode === 'add' ? '添加失败' : '修改失败')
                                    this.pageStatus.sending = false
                                }
                                if (this.mode === 'add'){
                                    this.$http.post(url, dateToSubmit).then(successHandle).catch(failedHandle)
                                }else{
                                    this.$http.put(url, dateToSubmit).then(successHandle).catch(failedHandle)
                                }
                            },
                            onCancel: () => {
                            }
                        });
                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })
            },
            submit(name) {
                this.submitBase(name);
            },
            createEmptyDataToAdd() {
                return{
                    trainingNum: 0,
                    certificatesNum: 0,
                    id:this.get_uuid()
                }
            },
            deleteData(params) {
                this.deleteDateById(params.row.id);
            },
            reseter() {
                this.dataToQuery = {};
                this.query1()
                if (this.$refs.childOrg) {
                    this.$refs.childOrg.resetCurrentOrg();
                }
                
            },
            setOrgId(data) {
                this.dataToQuery.companyId = data[data.length - 1];
            },
            setOrgName(data) {
                this.dataToQuery.companyName = data;
            },
            async afterDataToViewInit() {
                await this.getFiles('id');
            }

        },
        watch:{

        },

    }
</script>

<style lang='css' scoped>

</style>
